<template>
  <div class="mt-4">
    <el-form
      :model="help_list"
      :inline="true"
      ref="ruleFormRef"
      class="w-full"
      label-width="130"
      v-loading="data.mtloading"
    >
      <div v-for="(item, key) in help_list" :key="key">
        <div class="w-full flex flex-wrap mb-2 bg-slate-50 relative">
          <div class="w-1/4 p-4 pb-0">
            <el-form-item
              :label="$t('machine.helps.helpTitle') + ':'"
              prop="deal_service_phone"
              class="w-11/12"
            >
              <span v-if="item && item.btmodify">{{ item.title || "--" }}</span>
              <el-input
                v-else
                v-model="item.title"
                :placeholder="$t('message.pleaseEnter')"
                style="width: 100%"
              />
            </el-form-item>
          </div>
          <div class="w-1/4 p-4 pb-0">
            <el-form-item
              :label="$t('machine.helps.displayHelp') + ':'"
              prop="show_goods"
              class="w-11/12"
            >
              <span v-if="item && item.btmodify">{{
                item.show == 1
                  ? $t("machine.configs.display")
                  : $t("machine.configs.hide")
              }}</span>
              <el-switch
                v-else
                v-model="item.show"
                :active-value="1"
                :inactive-value="2"
              />
            </el-form-item>
          </div>
          <div class="w-1/4 p-4 pb-0">
            <!-- <el-form-item :label="$t('machine.configs.langCode')+':'" prop="deal_service_phone" class="w-11/12">
					<span v-if="item">{{ item.lang || '--' }}</span>
				</el-form-item> -->
          <el-tabs
            v-model="editableTabsValue"
            type="card"
            :class="locale == 'en'?'demo-tabsLang_en demo-tabsLang':'demo-tabsLang'"
            @tab-change="onTabLang"
          >
          <el-tab-pane
            :disabled="!props.info.m_id"
            v-for="item in tabLangList"
            :key="item.lang"
            :label="locale == 'en'? item.lang == 'zh-cn'?$t('message.DefaultData'): item.lang: item.name"
            :name="item.lang"
            >
            </el-tab-pane>
          </el-tabs>
          </div>

          <div class="absolute right-4 top-4">
            <!-- <div v-if="item && !item.btmodify"> -->
            <el-button type="primary" size="large" @click="add(key)">{{ $t('public.newAdd')}}</el-button>
            <!-- <el-button type="warning" size="large" @click="modify(item)">{{ $t('public.modify')}}</el-button> -->
            <!-- <el-button type="info" size="large" @click="onDel(item, key)">{{ $t("public.del") }}</el-button> -->
            <!-- </div> -->
            <!-- <div v-else> -->
            <!-- <el-button type="warning" size="large" @click="modify(item)">{{ $t('public.modify')}}</el-button> -->
            <el-button type="success" size="large" @click="onSave(item)">{{
              $t("public.save")
            }}</el-button>
            <el-button type="info" size="large" @click="onDel(item, key)">{{
              $t("public.del")
            }}</el-button>
            <!-- <el-button type="danger" size="large" @click="cancel(item, key)">{{ $t('public.cancel')}}</el-button> -->
            <!-- </div> -->
          </div>
          <div class="w-full p-4 pt-0" v-if="item">
            <el-form-item
              :label="$t('machine.helps.content') + ':'"
              prop="show_goods"
              class="w-full"
            >
              <Editor v-model="item.content" />
            </el-form-item>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t: $t, locale } = useI18n();
import { getlang } from "@/api/manage";
import {
  gethelpList,
  delhelpList,
} from "@/api/machine";
import {ref} from 'vue'
import Editor from "@/components/Editor/index.vue";
let emit = defineEmits(["submitLang", "delLang"]);
let ruleFormRef = ref()
let editableTabsValue = ref('zh-cn')
const tabLangList = ref([]);
let props = defineProps({
  info: {
    type: Object,
    default: {},
  },
  machineLangList: {
    type: Array,
    default: [],
  },
  isField: {
    type: Boolean,
    default: true,
  },
});
let help_list = ref(
  [
    {
      // 帮助信息主体
      mh_id: "",
      title: "",
      content: "",
      lang: "",
      show: 1,
      btmodify: false,
    },
  ]
)
let data = reactive({
  rowLang: "",
  mtloading: false, // 加载
  language: [], // 语言列表
  used: "", // 原始数据
  help_list: [
    {
      // 帮助信息主体
      mh_id: "",
      title: "",
      content: "",
      lang: "",
      show: 1,
      btmodify: false,
    },
  ],
});
watchEffect(() => {
    if (props.machineLangList.length) {
      help_list.value.forEach((item) => {
        (item.mh_id = props.machineLangList[0].mh_id),
          (item.title = props.machineLangList[0].title);
        item.content = props.machineLangList[0].content;
        item.show = props.machineLangList[0].show;
        item.lang = props.machineLangList[0].lang;
      });
    } else {
      help_list.value = [
        {
          mh_id: "",
          title: "",
          content: "",
          show: 1
        },
      ];
    }
});
// 切换语言tab
let onTabLang =()=>{
	data.rowLang = editableTabsValue.value;
}
// tab语言列表
let findGetlang = () => {
  getlang({}).then((res) => {
    if (res.state == 200) {
      res.data.forEach(item=>{
        if(item.lang == 'zh-cn'){
          item.name = $t('message.DefaultData')
        }
      })
      tabLangList.value = res.data;
    }
  });
};
findGetlang();
// 获取列表信息
let getlist = () => {
  let info = props.info;
  gethelpList({ m_id: info.m_id }).then((res) => {
    if (res.state == 200) {
      if (!res.data.length) {
        return;
      }
      help_list.value = [];
      
      // for (let item of res.data) {
      if (res.data.length) {
        // help_list.value.push({
        //   mh_id: res.data[0].mh_id,
        //   title: res.data[0].title,
        //   content: res.data[0].content,
        //   lang: res.data[0].lang,
        //   show: res.data[0].show,
        // });

        help_list.value = res.data
      }
      // }
      data.used = JSON.stringify(help_list.value);
    }
  });
};

// 新增
let add = (e) => {
  debugger
  let num = e + 1;
  let obj = {
    mh_id: "",
    title: "",
    content: "",
    lang: "",
    show: 1,
  };
  help_list.value.splice(num, 0, obj);
};

// 修改
let modify = (e) => {
  e.btmodify = true;
};

// 删除
let onDel = (e, k) => {
  ElMessageBox.confirm($t("message.delData"))
    .then((res) => {
      let obj = {
        mh_id: e.mh_id,
      };
      delhelpList(obj).then((res) => {
        if (res.state == 200) {
          let obj = {
            mh_id: "",
            title: "",
            content: "",
            lang: "",
            show: 1,
          };
          help_list.value = [obj]
          ruleFormRef.value.resetFields
          emit("delLang");
          ElMessage({
            message: $t("message.delSuccess"),
            type: "success",
          });
          return;
        }
        ElMessage({
          message: $t("message.networkFailed"),
          type: "error",
        });
      });
    })
    .catch((err) => {
      console.log("取消");
    });
};

// 保存
let onSave = (e) => {
  debugger
  if (e.title == "" || e.content == "") {
    ElMessage({
      message: $t("message.pleaseEnterData"),
      type: "error",
    });
    return;
  }

  let parm = {
    title: e.title,
    content: e.content,
    show: e.show,
  };
  // 添加
  if (!props.machineLangList.length) {
    emit("submitLang", parm, 5);
  }
  // 编辑
  if (props.machineLangList.length && props.machineLangList[0].mh_id) {
    emit("submitLang", parm, 6);
  }
};

// 取消
let cancel = (e, k) => {
  if (e.mh_id == "") {
    help_list.value.splice(k, 1);
  } else {
    let arr = JSON.parse(data.used);
    for (let item of arr) {
      if (item.mh_id == e.mh_id) {
        for (let key in data.help_list) {
          if (data.help_list[key].mh_id == e.mh_id) {
            data.help_list[key] = item;
          }
        }
      }
    }
  }
};

// 获取信息
let getlanglist = () => {
  // 语言信息
  getlang({}).then((res) => {
    if (res.state == 200) {
      data.language = res.data;
    }
  });
};

// getlanglist();
getlist();
</script>
<style lang="scss" scoped>
  .demo-tabsLang_en{
    width: 270px !important;
  }
  .demo-tabsLang {
    overflow-x: auto;
    width: 340px;
    float: right;
    .isActive {
      background-color: #409eff;
      color: #fff;
    }
    .tabsLang_item {
      cursor: pointer;
    }
  }
  .tabsLang {
    display: flex;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
    background-color: #409eff;
    color: #fff;
  }
</style>
